<template>
  <div>
    <!-- 面包导航 -->
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>日志管理</el-breadcrumb-item>
      <el-breadcrumb-item>登入日志</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card id="box-card">
      <!-- 输入框 -->
      <el-form size="mini" :inline="true" class="demo-form-inline" :model="queryMap">
        <el-form-item label="用户名">
          <el-input v-model="queryMap.username" clearable placeholder="请输入用户名查询"></el-input>
        </el-form-item>
        <el-form-item label="IP地址">
          <el-input v-model="queryMap.ip" clearable placeholder="请输入IP查询"></el-input>
        </el-form-item>
        <el-form-item  label="登入地址">
          <el-input
            v-model="queryMap.location"
            clearable
            placeholder="请输入登入地址查询"
            class="input-with-el-select"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="search" type="primary"
            >查询</el-button
          >
          <el-button :disabled="this.sels.length === 0" icon="el-icon-delete" @click="deleteFileOrDriectory">批量</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格区域 -->
      <el-table
        border
        size="mini"
        stripe
        :data="Record"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="id" label="ID" type="index" width="50">       
        </el-table-column>
        <el-table-column prop="username" label="登入用户" width="150">
        </el-table-column>
        <el-table-column prop="loginTime" label="登入时间" width="190">
        </el-table-column>
        <el-table-column prop="location" label="登入地点" width="250">
        </el-table-column>
        <el-table-column prop="ip" label="IP地址" >
        </el-table-column>
        <el-table-column prop="userSystem" label="操作系统" width="150">
        </el-table-column>
        <el-table-column prop="userBrowser" label="浏览器" >
        </el-table-column>
        <!--        <el-table-column align="center" prop="sort" label="排序"></el-table-column>-->
        <el-table-column align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      background
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryMap.pageNum"
        :page-sizes="[ 10, 15, 20]"
        :page-size="this.queryMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "loginLog",
  components: {},
  data() {
    return {
      sels: [],       //选中值的显示
      Record: [],     //表格数据
      queryMap: {     //查询对象
        pageNum:1,    //当前第几页
        pageSize:10,  //一页多少条数据
        location:""   //登入地址
        },  
        total:0,
    };
  },
  created() {
    this.getList();
  },
  mounted() { 
  },
  activated() {},
  methods: {
    //获取登入日志列表
    async getList(){
      let res=await this.$http.get("loginLog/findLoginLogList",{params:this.queryMap});
      console.log(res);
      if(res.data.code!=200){
        return this.$message.error("获取列表失败");
      }else{
        this.Record=res.data.data.rows;
        this.total=res.data.data.total;
      }
    },
    //批量删除
    async deleteFileOrDriectory(){
      var ids =this.sels.map(item=>item.id).join();//获取所有选中行的id组成的字符串，以逗号分隔
      var res = await this.$confirm(
          "此操作将永久删除该登入日志, 是否继续?",
          "提示",
          {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
          }
      ).catch(() => {
          this.$message({
              type: "info",
              message: "已取消删除"
          });
      });
      if (res === "confirm") {
          let res = await this.$http.delete("loginLog/batchDelete/" + ids);
          if (res.data.code === 200) {
              this.$message.success("登入日志删除成功");
              this.getList();
          } else {
              this.$message.error(res.msg);
          }
      }
    },
    //查询
    search() {
      this.queryMap.pageNum=1;
      this.getList();
    },
    //点击删除登入日志
    async del(id){
      var res =await this.$confirm(
        "此操作将永久删除该登入日志，是否继续？",
        "提示",
        {
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning"
        }
      ).catch(()=>{
        this.$message({
          type:"info",
          message:"已取消删除"
        });
      });
      if (res === "confirm"){
        let res =await this.$http.delete("loginLog/delete/"+id);
        if(res.data.code === 200){
          this.$message.success('登入日志删除成功');
          this.getList();
        }else{
          this.$message.error(res.msg);
        }
      }
    },
    //获取勾选列表id
    handleSelectionChange(sels){
      this.sels=sels;
    },
    // 改变页码
    handleSizeChange(newSize) {
      this.queryMap.pageSize=newSize;
      this.getList();
    },
    // 翻页
    handleCurrentChange(current) {
      this.queryMap.pageNum=current;
      this.getList();
    },
  },
};
</script>

<style>
</style>